<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外卖</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/supplyShoping.css">

</head>
<body>
<div class="container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label"> 团购名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsName" required lay-verify="required" placeholder="请输入团购名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分享描述</label>
            <div class="layui-input-inline">
                <input type="text" name="shareDepict" required lay-verify="required" placeholder="请输入分享描述"
                       autocomplete="off" class="layui-input">
                <div class="layui-form-mid layui-word-aux">微信分享给好友时会显示，建议36个字以内</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">团购图：</label>
            <div class="layui-input-inline file">
                <div class="file">
                    <input onchange="changepic(this)" style="display:block;width: 83px;height: 83px;position:absolute;opacity:0;" type="file" id="img"
                           name="goodsPicture" accept="image/gif,image/jpeg,image/x-png"/>
                    <img style="width: 83px;height: 83px;"
                         src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1557026059&di=6b1de82630da923757fa6aa52c34fe52&src=http://ku.90sjimg.com/element_origin_min_pic/00/91/87/8856f1865e892ed.jpg">
                </div>

                <div class="layui-form-mid layui-word-aux">建议尺寸：800*800像素，最多上传6张</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">团购视频：</label>
            <div class="layui-input-inline">
                <div class="file">
                    <input onchange="changepic(this)" style="display:block;width: 83px;height: 83px;position:absolute;opacity:0;" type="file" id="img"
                           name="goodsPicture" accept="image/gif,image/jpeg,image/x-png"/>
                    <img style="width: 83px;height: 83px;"
                         src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1557026059&di=6b1de82630da923757fa6aa52c34fe52&src=http://ku.90sjimg.com/element_origin_min_pic/00/91/87/8856f1865e892ed.jpg">
                </div>
                <div class="layui-form-mid layui-word-aux">建议时长9~30秒，建议视频宽高比1:1</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否主推：</label>
            <div class="layui-input-inline layui-input-inline1" style="width:21px;">
                <input type="checkbox" name="" title="" lay-skin="primary">
            </div>
            <div class="layui-form-mid layui-word-aux">若为主推，请上传主推图片</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主推图：</label>
            <div class="layui-input-inline file">
                <div id="showImg"><img src="" id="show" width="83"></div>
                <div class="file">
                    <input onchange="changepic(this)" style="position:absolute;opacity:0;" type="file" id="img"
                           name="goodsPicture" accept="image/gif,image/jpeg,image/x-png"/>
                    <img style="width: 83px;height: 83px;"
                         src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1557026059&di=6b1de82630da923757fa6aa52c34fe52&src=http://ku.90sjimg.com/element_origin_min_pic/00/91/87/8856f1865e892ed.jpg">
                </div>
                <div class="layui-form-mid layui-word-aux">建议尺寸：1600*800像素</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">团购售价：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsName" required lay-verify="required" placeholder="请输入内容"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">平台佣金：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsName" required lay-verify="required" placeholder="请输入内容"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsName" required lay-verify="required" placeholder="请输入内容"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsName" required lay-verify="required" placeholder="请输入内容"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">团购内容：</label>
            <div class="layui-input-block tg_all">
                <table id="trackTable1" width="200">
                    <tr>
                        <th>团购名</th>
                        <th>价格</th>
                    </tr>

                </table>
                <div class="layui-btn addH" onclick="addH()">添加团购内容</div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit" value="Submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<script type="text/javascript" src="../../global/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../global/js/jq.js"></script>
<script type="text/javascript" src="../../global/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../global/layui/layui.js"></script>
<script type="text/javascript" src="../../global/js/my/permission.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#table").DataTable()
    });
</script>
<script type="text/javascript">
    //使用layui的form表单
    layui.use('form', function () {
        var form = layui.form;
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            console.log(data.field);
            var formStr = data.field;
            var SpecListBox = [];
            var SpecList = {
                "specDetail": "",
                "specStock": 0,
                "specOriginalPrice": 0,
                "specPresentPrice": 0,
                "specCommission": 0,
                "specSort": "",
                "specScale": "",
                "specSmallChange": "",
                "spaceStockWarn": 0
            };
            // for(var i=0;i<)

            var clyjNearbyShopsGoodsSpecList = SpecListBox;
            // var params = Object.assign(formStr,);
            return false;
        });
    });
    //获取所属栏目：
    $.ajax({
        url: "/clyjNearbyShopsGoods/queryGoodsType",
        dataType: 'json',
        type: 'post',
        async: false,
        success: function (data) {
            console.log(data);
            $.each(data, function (index, data) {
                $("#GoodsType").append('<option value="' + data.typeid + '" >' + data.typeName + '</option>')
            });

        }
    });

    //图片上传：
    function changepic() {
        var reads = new FileReader();
        f = document.getElementById('img').files[0];
        reads.readAsDataURL(f);
        console.log(f)
        reads.onload = function (e) {
            document.getElementById('show').src = this.result;
        };
    }

    function readers(fil) {
        var reader = new FileReader();  // 异步读取存储在用户计算机上的文件
        reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
        console.log(reader);
        reader.onload = function () {
            document.getElementById("dd").innerHTML += "<img src='" + reader.result + "'>";  // 添加图片到指定容器中
        };
    }

    //添加行
    function addH() {
        console.log("添加行");
        $("#trackTable1 tbody:last").append('<tr><td><input type="text" placeholder="项目一"></td><td><input type="text" placeholder="价格"></td></tr>')
    }

</script>